<script>
import index from '@/api/index.js'
export default {
  name: 'app',
  data() {
    return {
      start:0,//当前刷新起始页数
      count:3 ,//每次加载多少条数据
      postLoad:false,
      posts: []
    }
  },
  watch:{
    postLoad:{
      handler(newValue){
        if (newValue){
          console.log('底部页面加载中')
          console.log('当前从',this.start,"开始加载",this.count,'页')
          this.loadPost(true)
        }else {
          console.log('底部页面加载完毕')
        }
      }
    }
  },
  methods: {
    formatDate(date) {
      var date1 = new Date(date);
      var YY = date1.getFullYear() + '-';
      var MM = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1) + '-';
      var DD = (date1.getDate() < 10 ? '0' + (date1.getDate()) : date1.getDate());
      var hh = (date1.getHours() < 10 ? '0' + date1.getHours() : date1.getHours()) + ':';
      var mm = (date1.getMinutes() < 10 ? '0' + date1.getMinutes() : date1.getMinutes()) + ':';
      var ss = (date1.getSeconds() < 10 ? '0' + date1.getSeconds() : date1.getSeconds());
      return YY + MM + DD + " " + hh + mm + ss;
    },
    toPostInfo(postId){

      this.$router.push({
        path:'/postInfo',
        query:{
          postId:postId
        }
      })
    },
    toSendPost(){
      this.$router.push({
        path:'/sendPost',
      })
    },
    loadPost(auto){
      index.indexData(this.start, this.count,this.$store.state.searchContext).then((res)=>{
        if (auto) {
          this.posts = this.posts.concat(res.data.data)
        }else {
          this.posts = res.data.data
        }
        this.start += res.data.data.length
        this.postLoad = false
      })
    }
  },
  components: {},
  mounted() {
    // 加载帖子
    this.loadPost(true)
    // 页面滚动侦听
    window.onscroll = () =>{
      //文档高
      let scrollHeight = document.documentElement.scrollHeight
      //滚动条距离
      let scrollTop = document.documentElement.scrollTop
      //窗口高
      let clientHeight = document.documentElement.clientHeight

      if (clientHeight + scrollTop >= scrollHeight - 10) {
        this.postLoad = true
      }
    }


  }
}
</script>

<template>
  <div id="app">
    <div class="root-container">
      <div class="main-container">
        <!-- 主要内容左侧问答区 -->
        <div class="main-content">
          <div class="menu">
            <h2>问题</h2>
            <button type="button" id="send-post-button" @click.prevent="toSendPost">发帖</button>
          </div>
          <div class="content">
            <ul class="content-list" id="post-list">

              <li class="content-list-item" v-for="(item,index) in posts" :key="index">
                <div class="item-state">
                  <div
                      :class="{'item-recover':true, 'item-state-without' : item.commentCount === 0 ,   'item-state-common':  item.commentCount >= 3, 'item-state-hot' : item.commentCount >= 10}">
                    <p class="recover-count">{{ item.commentCount }}</p>
                    <span>回答</span>
                  </div>
                  <div
                      :class="{'item-recover':true, 'item-state-without' : item.postReadCount === 0 ,   'item-state-common':  item.postReadCount >= 3, 'item-state-hot' : item.postReadCount >= 10}">
                    <p class="read-count">{{ item.postReadCount }}</p>
                    <span>阅读</span>
                  </div>
                </div>
                <div class="item-info">
                  <div class="item-info-title">
                    <a @click.prevent="toPostInfo(item.postId)">{{ item.postTitle }}</a>
                  </div>
                  <div class="item-label">
                    <div class="tag">
                      <ul>


                        <li v-for="tagItem in item.whatTags" :key="tagItem.id">{{tagItem.tagTitle}}</li>

                      </ul>
                    </div>
                    <div class="by-user">由<span>{{ item.postOperator }}</span>
                      <span>{{ formatDate(item.postUpdateTime > item.postCreateTime ? item.postUpdateTime : item.postCreateTime) }}</span>
                      <span>{{ item.postUpdateTime > item.postCreateTime ? '回复' : '创建' }}</span>
                    </div>
                  </div>
                </div>

              </li>


            </ul>
          </div>
        </div>
        <!--        <div class="main-bar" id="main-bar">-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>

<style>

.content {

  margin: 10px 0;
  border: 1px solid lightgrey;
  border-radius: 5px;
  width: 800px;

  background-color: #fff;
  box-shadow: 0 0 5px 1px #e8e8e8;
}

.content-list {
  margin: 0;

}

#send-post-button {
  font-weight: 100;
  background-color: rgb(0, 150, 94);
}



.menu {
  display: flex;
  justify-content: space-between;
}

.item-recover,
.item-read {
  text-align: center;
  border: 1px solid darkgrey;
  margin: 5px;
  padding: 10px;
}

/* 热门 标红 */
.item-state-hot {
  border: 1px solid #e40000;
  color: #e40000;
}

/* 一般 橙 */

.item-state-common {
  border: 1px solid #e48947;
  color: #e48947;
}

/* 冷淡 灰色 */
.item-state-without {
  border: 1px solid #979797;
  color: #979797;
}



/* 标签结束 */


.item-state {
  display: flex;
}


.content-list .content-list-item:not(:first-child) {
  border-top: 1px solid lightgray;
}


.content-list-item {
  height: 80px;
  width: 100%;
  /* background-color: #ffff7f; */
  display: flex;
  align-items: center;
  /* 	justify-content: space-between; */

  box-sizing: border-box;
  transition: 0.3s;
}
.content-list-item:hover{
  cursor: pointer;
  box-shadow: 0 0 5px 1px #19c040;
}

.item-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 40px;
}

.tag ul li {
  display: inline;
  font-size: 12px;
  background-color: #d1ffc6;
  padding: 2px 5px;
  border-radius: 5px;

  color: #218204;
  margin: 5px;
}

.by-user span:nth-child(1) {
  color: #007500;
}

.by-user{

}
.by-user span {
  margin: 0px 5px;
}


.item-info-title {
  padding: 3px 10px;
  font-size: 18px;
}

.item-label .by-user {
  font-size: 12px;
  display: inline;
}

#search-button,
#send-post-button {
  font-size: 20px;
  line-height: 40px;
  border-radius: 14px;
  border: none;
  background-color: rgb(0, 150, 94);
  color: white;
  font-weight: 700;
  width: 100px;
  cursor: pointer;

}

/* 主界面右侧 */
</style>